<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>重置密码 - {:conf('site_name')}</title>
    <meta name="keywords" content="重置密码,找回密码,{:conf('site_name')}">
    <meta name="description" content="重置密码 - {:conf('site_name')}">
    <meta name="author" content="www.qqss.net">
    <!-- Favicon -->
    <link rel="icon" href="{:conf('site_favicon')}" type="image/x-icon">
    <!-- CSS -->
    <link href="/static/default/css/tailwind/tailwind.min.css?v={$static_version}" rel="stylesheet">
    <link href="/static/css/fontawesome/css/all.min.css?v={$static_version}" rel="stylesheet">
    <link href="/static/default/css/auth.css?v={$static_version}" rel="stylesheet">
    <link href="/static/default/css/user/auth.css?v={$static_version}" rel="stylesheet">

    <!-- 插件头部hook -->
    {cms:hooks name="template.head" /}
</head>

<body class="bg-gray-50">
    <!-- 插件头部hook -->
    {cms:hooks name="common.header.before" /}

    <div class="auth-container flex min-h-screen">
        <!-- 左侧图片区域 -->
        <div class="auth-left w-1/2 hidden lg:flex flex-col justify-center items-center text-white p-12 relative">
            <!-- 浮动图标 -->
            <i class="floating-icon fas fa-key text-4xl opacity-20"></i>
            <i class="floating-icon fas fa-shield-alt text-3xl opacity-15"></i>
            <i class="floating-icon fas fa-lock text-5xl opacity-10"></i>
            <i class="floating-icon fas fa-undo-alt text-3xl opacity-25"></i>

            <div class="text-center z-10 relative max-w-md mx-auto">
                <!-- 主标题 -->
                <div class="mb-8">
                    <h1
                        class="text-5xl xl:text-6xl font-bold mb-4 bg-gradient-to-r from-white to-blue-100 bg-clip-text text-transparent">
                        重置密码
                    </h1>
                    <div class="w-16 h-1 bg-white bg-opacity-60 mx-auto rounded-full"></div>
                </div>

                <!-- 描述文案 -->
                <p class="text-xl xl:text-2xl mb-12 opacity-90 leading-relaxed font-light">
                    设置您的新密码<br>
                    <span class="text-lg opacity-75">安全可靠，重新开始</span>
                </p>

                <!-- 特色功能 -->
                <div class="grid grid-cols-1 gap-6 mb-8">
                    <div class="flex items-center justify-center space-x-3 py-3 px-6 backdrop-blur-sm">
                        <i class="fas fa-shield-check text-2xl text-green-200"></i>
                        <span class="text-lg font-medium">安全加密</span>
                    </div>
                    <div class="flex items-center justify-center space-x-3 py-3 px-6 backdrop-blur-sm">
                        <i class="fas fa-key text-2xl text-blue-200"></i>
                        <span class="text-lg font-medium">密码保护</span>
                    </div>
                    <div class="flex items-center justify-center space-x-3 py-3 px-6 backdrop-blur-sm">
                        <i class="fas fa-check-circle text-2xl text-purple-200"></i>
                        <span class="text-lg font-medium">即时生效</span>
                    </div>
                </div>

                <!-- 底部提示 -->
                <div class="text-sm opacity-60">
                    <p>密码将使用 <span class="font-semibold text-green-200">高级加密</span> 技术保护</p>
                </div>
            </div>
        </div>

        <!-- 右侧表单区域 -->
        <div class="auth-right w-full lg:w-1/2 flex items-center justify-center p-6 lg:p-12">
            <div class="w-full max-w-md">
                <!-- 头部信息 -->
                <div class="text-center">
                    <h2 class="text-2xl md:text-3xl font-bold text-gray-800 mb-2">
                        设置新密码
                    </h2>
                    <p class="text-sm text-gray-500 mb-6">
                        为邮箱 <span class="font-medium text-blue-600">{$email}</span> 设置新密码
                    </p>
                </div>

                <!-- 重置密码表单 -->
                <form id="reset-form" class="space-y-6" onsubmit="return false;">
                    <!-- 隐藏token -->
                    <input type="hidden" name="token" value="{$token}">

                    <div class="space-y-4">
                        <!-- 新密码 -->
                        <div>
                            <label for="password" class="block text-sm font-medium text-gray-700 mb-2">
                                新密码 <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <input id="password" name="password" type="password" required
                                    class="form-input appearance-none relative block w-full px-4 py-3 pr-12 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                    placeholder="请输入新密码（至少6位）" minlength="6">
                                <button type="button" onclick="togglePassword('password')"
                                    class="absolute inset-y-0 right-0 pr-4 flex items-center">
                                    <i id="password-icon"
                                        class="fas fa-eye text-gray-400 hover:text-blue-600 transition-colors"></i>
                                </button>
                            </div>
                        </div>

                        <!-- 确认密码 -->
                        <div>
                            <label for="confirm_password" class="block text-sm font-medium text-gray-700 mb-2">
                                确认密码 <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <input id="confirm_password" name="confirm_password" type="password" required
                                    class="form-input appearance-none relative block w-full px-4 py-3 pr-12 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                    placeholder="请再次输入新密码">
                                <button type="button" onclick="togglePassword('confirm_password')"
                                    class="absolute inset-y-0 right-0 pr-4 flex items-center">
                                    <i id="confirm-password-icon"
                                        class="fas fa-eye text-gray-400 hover:text-blue-600 transition-colors"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 重置按钮 -->
                    <div>
                        <button type="submit" onclick="doResetPassword()" id="reset-btn"
                            class="btn-shine relative w-full flex items-center justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-300 overflow-hidden">
                            <span class="relative z-10 flex items-center">
                                <i class="fas fa-key mr-2"></i>
                                重置密码
                            </span>
                        </button>
                    </div>
                </form>

                <!-- 底部链接 -->
                <div class="text-center mt-6">
                    <div class="text-sm text-gray-500">
                        想起密码了？
                        <a href="{:_url_('auth.login')}"
                            class="font-medium text-blue-600 hover:text-blue-500 transition-colors">
                            返回登录
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入脚本组件 -->
    {include file="default/components/scripts" /}

    <script>
        // 切换密码显示/隐藏
        function togglePassword(fieldId) {
            const passwordInput = document.getElementById(fieldId);
            const passwordIcon = document.getElementById(fieldId + '-icon');

            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                passwordIcon.className = 'fas fa-eye-slash text-gray-400 hover:text-blue-600 transition-colors';
            } else {
                passwordInput.type = 'password';
                passwordIcon.className = 'fas fa-eye text-gray-400 hover:text-blue-600 transition-colors';
            }
        }

        // 执行密码重置
        function doResetPassword() {
            const form = document.getElementById('reset-form');
            const formData = new FormData(form);
            const btn = document.getElementById('reset-btn');
            const password = formData.get('password');
            const confirmPassword = formData.get('confirm_password');

            // 基本验证
            if (!password || !confirmPassword) {
                showError('请填写完整信息');
                return;
            }

            if (password.length < 6) {
                showError('密码长度不能少于6位');
                return;
            }

            if (password !== confirmPassword) {
                showError('两次输入的密码不一致');
                return;
            }

            // 触发点击动画
            btn.classList.add('btn-clicked');
            setTimeout(() => btn.classList.remove('btn-clicked'), 800);

            // 显示加载状态
            btn.disabled = true;
            btn.querySelector('span').innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>重置中...';

            // 发送重置请求
            $.ajax({
                url: '/web/auth/doResetPassword',
                type: 'POST',
                data: {
                    token: formData.get('token'),
                    password: password,
                    confirm_password: confirmPassword
                },
                dataType: 'json',
                success: function (response) {
                    if (response.code === 1) {
                        showSuccess('密码重置成功！');
                        setTimeout(() => {
                            window.location.href = response.data.redirect || '/web/auth/login';
                        }, 1500);
                    } else {
                        showError(response.msg || '重置失败');
                    }
                },
                error: function (xhr, status, error) {
                    console.error('Reset password error:', error);
                    showError('网络错误，请稍后重试');
                },
                complete: function () {
                    btn.disabled = false;
                    btn.querySelector('span').innerHTML = '<i class="fas fa-key mr-2"></i>重置密码';
                }
            });
        }

        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function () {
            // 聚焦密码输入框
            document.getElementById('password').focus();

            // 回车提交
            document.getElementById('reset-form').addEventListener('keypress', function (e) {
                if (e.key === 'Enter') {
                    doResetPassword();
                }
            });
        });
    </script>

    <!-- 插件底部hook -->
    {cms:hooks name="common.footer" /}
</body>

</html>